<template>
  <el-tabs>
      <el-tab-pane label="常规扣分项">
          <el-table :data="raid.downItem" size="mini" border stripe height="385" style="width: 100%">
              <el-table-column prop="boss" label="Boss" width="160" align="center"></el-table-column>
              <el-table-column prop="itemName" label="装备名称" width="300" align="center">
                  <template slot-scope="scope">
                    <span v-if="!scope.row.itemID" :style="{color:scope.row.color}">{{scope.row.itemName}}</span>
                    <item-pop v-else :item-name="scope.row.itemName" :item-color="scope.row.color" :item-id="scope.row.itemID"></item-pop>
                  </template>
              </el-table-column>
              <el-table-column prop="costs" label="分值" width="140" align="center"></el-table-column>
              <el-table-column prop="player" label="拾取人员">
                  <template slot-scope="scope">
                      <span class="">
                          <span class="single-player-name" :style="{color: classMap[scope.row.player.class]}">{{scope.row.player.name}}</span>
                      </span>
                  </template>
              </el-table-column>
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="常规加分项">
          <el-table :data="raid.raiseItem" size="mini" border stripe height="385" style="width: 100%">
              <el-table-column prop="name" label="Boss名称" width="120">
                  <template slot-scope="scope">
                    <div v-html="scope.row.name"></div>
                  </template>
              </el-table-column>
              <el-table-column prop="name" label="加分值" width="60">
                  <template slot-scope="scope">
                      <el-popover
                        placement="top-start"
                        title="分数来源"
                        width="220"
                        trigger="hover"
                        >
                        <div v-if="scope.row.detailList.length>0">
                          <div v-for="(item,i) in scope.row.detailList" :key="i"><span :style="{color: item.color}">{{item.itemName}}</span>: {{item.score}}</div>
                        </div>
                        <div v-else>无拍出分数的装备</div>
                        <span slot="reference">{{scope.row.score}}</span>
                      </el-popover>
                  </template>
              </el-table-column>
              <el-table-column prop="time" label="击杀时间" width="80"></el-table-column>
              <el-table-column prop="players" label="参与人员(名字为灰色表示程序判断出该团员当时可能不在团，默认不加分，如有异议请联系管理员)">
                  <template slot-scope="scope">
                      <div class="players-wrapper with-checkbox">
                          <span v-for="player in scope.row.players" :key="player.name">
                              <span class="player-name" :style="{color: player.isOnLine?classMap[player.class]:'#7d7d7a'}">{{player.name}}</span>
                              <span class="check-icon" :class="player.checked?'el-icon-success':'el-icon-circle-check'"></span>
                              <span class="score" v-text="player.score"></span>
                          </span>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="额外加分项">
          <el-table :data="raid.additionalRaiseItem" size="mini" border stripe height="385" style="width: 100%">
              <el-table-column prop="reason" label="加分类型" width="120">
                  <template slot-scope="scope">
                      {{reasonMap[scope.row.reason]}}
                      <div v-if="scope.row.reason == 'other'">
                          加分原因:{{scope.row.reasonNote || '团长很lan，没有写原因'}}
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="players" label="相关人员">
                  <template slot-scope="scope">
                      <div class="players-wrapper with-checkbox">
                          <span v-for="player in scope.row.players" :key="player.name">
                              <span class="player-name" :style="{color: classMap[player.class]}">{{player.name}}</span>
                              <span class="check-icon" :class="player.checked?'el-icon-success':'el-icon-circle-check'"></span>
                              <span class="score" v-text="player.score"></span>
                          </span>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="额外扣分项">
          <el-table :data="raid.additionalDownItem" size="mini" border stripe height="385" style="width: 100%">
              <el-table-column prop="reason" label="扣分类型" width="120">
                  <template slot-scope="scope">
                      {{reasonMap[scope.row.reason]}}
                      <div v-if="scope.row.reason == 'other'">
                          扣分原因:{{scope.row.reasonNote || '团长很lan，没有写原因'}}
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="players" label="参与人员">
                  <template slot-scope="scope">
                      <div class="players-wrapper with-checkbox">
                          <span v-for="player in scope.row.players" :key="player.name">
                              <span class="player-name" :style="{color: classMap[player.class]}">{{player.name}}</span>
                              <span class="check-icon" :class="player.checked?'el-icon-success':'el-icon-circle-check'"></span>
                              <span class="score" v-text="player.score"></span>
                          </span>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </el-tab-pane>
  </el-tabs>
	
</template>

<script>
import ItemPop from '@/components/ItemPop'
export default {
  components: {ItemPop},
	props: {
		raid: {
			required: true,
			type: Object
		}
	},
	data () {
		return {
      formLabelWidth: "100px",
      classMap: {
        战士: "#c2b396",
        盗贼: "#e4ff95",
        法师: "#4ee0ff",
        牧师: "#fbfbff",
        萨满祭司: "#f793d9",
        术士: "#6b75ee",
        德鲁伊: "#f99645",
        猎人: "#8ac37e"
      },
      reasonMap: {
        boss: "击杀boss得分",
        item: "掉落装备得分",
        collect: "集合分",
        dismiss: "解散分",
        assart: "开荒分",
        whole: "全程参与补助",
        firstDown: "Boss首次击杀",
        loot: "获取装备",
        add: "引怪导致团灭",
        ot: "OT导致团灭",
        disobey: "不听指挥",
        other: "其他"
      }
		}
	}
}
</script>

<style lang="less" scoped>
.players-wrapper {
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-wrap: wrap;
  > span {
    font-size: 12px;
    width: 130px;
    padding: 2px 5px;
    .player-name {
      display: inline-block;
      width: 80px;
      text-align: right;
      padding-right: 4px;
      box-sizing: border-box;
    }
    .check-icon{
      color: #65a2ff;
    }
    .score{
      color: #fff;
      padding-left: .5em;
    }
  }
}
</style>